<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="../assets/lib/layui/css/layui.css" />
        <link rel="stylesheet" href="./css/category.css" />
    </head>
    <body>
        <div class="layui-card">
            <div class="layui-card-header">
                <!-- 标题区 -->
                文章类别管理
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm add">
                    添加类别
                </button>
            </div>
            <div class="layui-card-body">
                <!-- 内容区 -->
                <table class="layui-table">
                    <colgroup>
                        <col width="40%" />
                        <col width="40%" />
                        <col />
                        <!-- 剩余的20% 就是第三列的宽度 -->
                    </colgroup>
                    <thead>
                        <tr>
                            <th>类别名称</th>
                            <th>类别别名</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

        <!-- 类别列表模板 start -->
        <script type="text/html" id="tpl-list">
            {{each data item}}
            <tr>
                <td>{{item.name}}</td>
                <td>{{item.alias}}</td>
                <td>
                    <button
                        type="button"
                        class="layui-btn layui-btn-xs edit"
                        data-id="{{item.id}}"
                        data-name="{{item.name}}"
                        data-alias="{{item.alias}}"
                    >
                        编辑
                    </button>
                    <button
                        data-id="{{item.id}}"
                        type="button"
                        class="layui-btn layui-btn-xs layui-btn-danger del"
                    >
                        删除
                    </button>
                </td>
            </tr>
            {{/each}}
        </script>
        <!-- 类别列表模板 end -->
        <!-- 添加类别弹层 开始 -->
        <script type="text/html" id="tpl-add">
            <!-- 表单去layui官网复制 -->
            <form class="layui-form" id="add-form" style="margin: 15px 30px 0 0">
                <!-- 第一项：类别名称 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">类别名称</label>
                    <div class="layui-input-block">
                        <input
                            type="text"
                            name="name"
                            required
                            lay-verify="required"
                            placeholder="请输入类别名称"
                            autocomplete="off"
                            class="layui-input"
                        />
                    </div>
                </div>
                <!-- 第二项：类别别名 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">类别别名</label>
                    <div class="layui-input-block">
                        <input
                            type="text"
                            name="alias"
                            required
                            lay-verify="required"
                            placeholder="请输入类别别名"
                            autocomplete="off"
                            class="layui-input"
                        />
                    </div>
                </div>
                <!-- 第三项：按钮（这个按钮去表单那复制） -->
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </script>
        <!-- 添加类别弹层 结束 -->
        <!-- 编辑弹层 开始 -->
        <script type="text/html" id="tpl-edit">
            <!-- 表单去layui官网复制 -->
            <!-- 快速数据回填  lay-filter="category" -->
            <form
                class="layui-form"
                id="edit-form"
                style="margin: 15px 30px 0 0"
                lay-filter="category"
            >
                <!-- 第一项：类别名称 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">类别名称</label>
                    <div class="layui-input-block">
                        <input
                            type="text"
                            name="name"
                            required
                            lay-verify="required"
                            placeholder="请输入类别名称"
                            autocomplete="off"
                            class="layui-input"
                        />
                    </div>
                </div>
                <!-- 第二项：类别别名 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">类别别名</label>
                    <div class="layui-input-block">
                        <input
                            type="text"
                            name="alias"
                            required
                            lay-verify="required"
                            placeholder="请输入类别别名"
                            autocomplete="off"
                            class="layui-input"
                        />
                    </div>
                </div>
                <!-- 第三项：按钮（这个按钮去表单那复制） -->
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="hidden" name="id" />
                        <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </script>
        <!-- 编辑弹层 结束 -->
        <script src="../assets/lib/jquery.js"></script>
        <script src="../assets/lib/template-web.js"></script>
        <!-- 必须加载layui.all.js，因为页面中用到了很多layui提供的功能，比如弹层 -->
        <script src="../assets/lib/layui/layui.all.js"></script>
        <script src="../assets/js/common.js"></script>
        <!-- 加载自己的js文件 -->
        <script src="./js/category.js"></script>
    </body>
</html>
